<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
        margin: 0;
        padding: 0;
        }
 
        header {
        text-align: center;
        margin-bottom: 15px;
        }
 
        #box {
        margin: 20px auto 0;
        width: 300px;
        text-align: center;
        }
 
        #bonus {
        height: 50px;
        width: 280px;
        background-color: #f3f3f3;
        }
 
        #benefit {
        height: 25px;
        width: 140px;
        }
 
        #roles {
        height: 22px;
        width: 130px;
        vertical-align: bottom;
        }
 
        #count {
        padding-top: 10px;
        padding-right: 11px;
        text-align: right;
        }
 
        #countBtn {
        height: 25px;
        width: 70px;
        text-align: center;
        background-color: #ffffff;
        cursor: pointer;
        }
 
        #benefit,
        #roles#countBtn,
        #bonus {
        border: 1px solid #d4d4d4;
        }
    </style>
 
 
    <script>
        function roles() {
            // 程序员提成计算
            this.programmer = function(data) {
                if (data > 10000) {
                    return data * 0.05;
                } else if (data >= 2000) {
                    return 50;
                } else {
                    return 0;
                }
            }
            // 项目经理提成计算
            this.manager = function(data) {
                if (data > 20000) {
                    return data * 0.2;
                } else {
                    return data * 0.1;
                }
            }
            // 销售人员提成计算
            this.salesman = function(data) {
                if (data > 100000) {
                    return data * 0.3;
                } else if (data >= 50000) {
                    return data * 0.2
                } else {
                    return data * 0.05;
                }
            }
        }
 
        // 提成对象
        function bonus() {
            // 项目收益
            this.benefit = 0;
        }
        bonus.prototype.setBenefit = function (data) {
            // 设置项目收益
            this.benefit = data;
        }
        // 设置bonus的原型链roles
        bonus.__proto__ = new roles();
        bonus.prototype.getBonus = function (role) {
            // 通过角色策略方法计算返回提成
            return role(this.benefit);
        }
 
        // 创建bonus的实例对象
        var bonusCount = new bonus();
        // 角色策略筛选
        var strategies = {
            "1": function () {
                // 程序员角色策略计算
                return bonusCount.getBonus(bonus.programmer);
            },
            "2": function () {
                // 项目经理角色策略计算
                return bonusCount.getBonus(bonus.manager);
            },
            "3": function () {
                // 销售人员角色策略计算
                return bonusCount.getBonus(bonus.salesman);
            }
        }
 
        function countFun() {
            // 获取项目受益值
            var benefit = document.getElementById("benefit").value;
            // 获取选择的角色值
            var role = document.getElementById("roles").value;
            // 设置项目收益
            bonusCount.setBenefit(benefit);
            //角色策略对应的提成计算值
            document.getElementById("bonus").value = strategies[role]();
        }
    </script>
</head>
 
<body>
    <div id="box">
        <header>项目提成计算器</header>
        <div id="dataBox">
            <input type="text" id="bonus" readonly="readonly" placeholder="项目提成">
        </div>
        <input type="text" id="benefit" value="0">
        <select name="" id="roles">
            <option value="1">程序员</option>
            <option value="2">项目经理</option>
            <option value="3">销售人员</option>
        </select>
        <div id="count">
            <input type="button" id="countBtn" value="计算" onclick="countFun()">
        </div>
    </div>
</body>
 
</html>